<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模拟实现Vue的MvvM</title>
</head>
<body>
  <div id='app'>
    <h3>个人简介</h3>
    <ul>
      <li>姓名：{{ name }} </li>
      <li>年龄：{{ age }} </li>
      <li>性别：{{ sex }} </li>
      <li>地址：{{ address.province }} - {{ address.city }} - {{ address.area }}</li>
      <li>爱好：{{ infos[likes][one] }}、 {{ infos.likes[two] }} </li>
      <li>特长：{{ infos[specialtys][1] }} ...</li>
      <li>
        学习经历：
        <ul>
          <li>{{ educations[0][school] }}</li>
          <li>{{ educations[1][school] }}</li>
        </ul>
      </li>
      <li>
        总分：{{ totalScore }}
        <ul>
          <li>语文：{{ scores[language] }}</li>
          <li>数学：{{ scores.mathematics }}</li>
          <li>英语：{{ scores[english] }}</li>
        </ul>
        <span>最高分：{{ maxScore }}</span>
      </li>
    </ul>
    <hr />
    <div>
      修改爱好1：<input type='text' v-model='infos.likes[one]' />
    </div>
    <div>
      修改学习经历2：<input type='text' v-model='educations[1][school]' />
    </div>
    <div>
      修改英语分数：<input type='number' v-model='scores.english' />
    </div>
  </div>

  <script src="Vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        name: 'lzx',
        age: 22,
        sex: '男',
        address: {
          province: '江西省',
          city: '赣州市',
          area: '大余县',
        },
        infos: {
          likes: {
            one: '看书',
            two: '看电视',
          },
          specialtys: ['打球', '游泳'],
        },
        educations: [
          {
            school: '池江中学',
          },
          {
            school: '大余中学',
          },
        ],
        scores: {
          language: 85,
          mathematics: 90,
          english: 75,
        },
      },
      computed: {
        totalScore: function() {
          return this.scores.language + this.scores.mathematics + this.scores.english;
        },
        maxScore: {
          get() {
            return Math.max(this.scores.language, this.scores.mathematics, this.scores.english);
          },
        },
      },
      mounted() {
        setTimeout(() => {
          console.log('组件已经编译且挂载完成！');
        }, 500);
      },
    })
  </script>
</body>
</html>